<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <meta name="description" content="刘清政">
  <meta name="keyword" content="hexo-theme">
  
    <link rel="shortcut icon" href="/css/images/logo.png">
  
  <title>
    
      Justin-刘清政的博客
    
  </title>
  <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.css" rel="stylesheet">
  <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/tomorrow.min.css" rel="stylesheet">
  
<link rel="stylesheet" href="/css/style.css">

  
    
<link rel="stylesheet" href="/css/plugins/gitment.css">

  
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/geopattern/1.2.3/js/geopattern.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/nprogress/0.2.0/nprogress.min.js"></script>
  
    
<script src="/js/qrious.js"></script>

  
  
    
<script src="/js/gitment.js"></script>

  
  

  
<meta name="generator" content="Hexo 4.2.0"></head>
<div class="wechat-share">
  <img src="/css/images/logo.png" />
</div>

  <body>
    <header class="header fixed-header">
  <div class="header-container">
    <a class="home-link" href="/">
      <div class="logo"></div>
      <span>Justin-刘清政的博客</span>
    </a>
    <ul class="right-list">
      
        <li class="list-item">
          
            <a href="/" class="item-link active">主页</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/tags/" class="item-link">标签</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/archives/" class="item-link">归档</a>
          
        </li>
      
        <li class="list-item">
          
            <a href="/about/" class="item-link">关于我</a>
          
        </li>
      
    </ul>
    <div class="menu">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </div>
    <div class="menu-mask">
      <ul class="menu-list">
        
          <li class="menu-item">
            
              <a href="/" class="menu-link mobile-active">主页</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/tags/" class="menu-link">标签</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/archives/" class="menu-link">归档</a>
            
          </li>
        
          <li class="menu-item">
            
              <a href="/about/" class="menu-link">关于我</a>
            
          </li>
        
      </ul>
    </div>
  </div>
</header>

    <main class="app-body">
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/20-BootStrap%E5%9F%BA%E7%A1%80/">python/前端/20-BootStrap基础</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1 什么是BootStrap
由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。

2 BootStrap的版本
BootStrap2
BootStrap3
BootStrap ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/20-BootStrap%E5%9F%BA%E7%A1%80/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/3-CSS%E5%9F%BA%E7%A1%80/">python/前端/3-CSS基础</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1、CSS是什么CSS（Cascading Style Sheet，层叠样式表)定义如何显示HTML元素。
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化（渲染）。
CSS3就是css语言，数字3是该语言的版本号
css语言开发的文件是以.css为后缀，通过在html文件中引 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/3-CSS%E5%9F%BA%E7%A1%80/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/21-BootStrap%E5%B8%83%E5%B1%80/">python/前端/21-BootStrap布局</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1 概览1.1 移动设备优先为了确保适当的绘制和触屏缩放，需要在 &lt;head&gt; 之中添加 viewport 元数据标签。
12

在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/21-BootStrap%E5%B8%83%E5%B1%80/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/6-CSS3%E5%9F%BA%E7%A1%80%E5%B8%83%E5%B1%80/">python/前端/6-CSS3基础布局</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          css基础布局1、布局相关的标签
&lt;div&gt;&lt;/div&gt; 定义文档中的分区或节
&lt;span&gt;&lt;/span&gt; 这是一个行内元素，没有任何意义
&lt;header&gt;&lt;/header&gt; HTML5新增 定义 section 或 p ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/6-CSS3%E5%9F%BA%E7%A1%80%E5%B8%83%E5%B1%80/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/10-JavaScript%E5%87%BD%E6%95%B0/">python/前端/10-JavaScript函数</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1-1 声明函数的方式
function 关键字
匿名函数方式(表达式方式)
Function 构造函数方式

1-2 参数问题
形参和实参数量问题
可选形参(参数默认值)
可变长的实参列表:实参对象 aruguments

1-3 回调函数一个函数就可以接收另一个函数作为参数，这种函数就称 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/10-JavaScript%E5%87%BD%E6%95%B0/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/9-JavaScript%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">python/前端/9-JavaScript基本数据类型</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1、变量的定义JS中定义变量，不同于Python，我们需要像Python定义函数那样，也需要用特定的关键词来定义变量：
ES5语法，我们采用var关键词定义变量，并且没有常量的概念
ES6语法，我们采用let关键词定义变量，用const关键词定义常量
注：我们不需要像Python那样切换解释 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/9-JavaScript%E5%9F%BA%E6%9C%AC%E6%95%B0%E6%8D%AE%E7%B1%BB%E5%9E%8B/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/23-BootStrap%E6%8F%92%E4%BB%B6/">python/前端/23-BootStrap插件</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1 BootStrap插件使用规则1.1 单个引入JavaScript 插件可以单个引入（使用 Bootstrap 提供的单个 *.js 文件），或者一次性全部引入（使用 bootstrap.js 或压缩版的 bootstrap.min.js）。

某些插件和 CSS 组件依赖于其它插件。如 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/23-BootStrap%E6%8F%92%E4%BB%B6/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/13-JS%E7%9A%84DOM%E6%93%8D%E4%BD%9C/">python/前端/13-JS的DOM操作</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1、DOM概述1-1 什么是DOM
文档对象模型 Document Object Model
文档对象模型 是表示和操作 HTML和XML文档内容的基础API
文档对象模型，是W3C组织推荐的处理可扩展标志语言的标准编程接口

12 DOM分类
核心 DOM - 针对任何结构化文档的标准模型 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/13-JS%E7%9A%84DOM%E6%93%8D%E4%BD%9C/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/18-JQuery%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/">python/前端/18-JQuery动画效果</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1. 基本效果123show([s,[e],[fn]])		显示隐藏的匹配元素hide([s,[e],[fn]])		隐藏显示的元素toggle([s],[e],[fn])	如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的

参数详解
123speed	: 三种预定速度之一的字 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/18-JQuery%E5%8A%A8%E7%94%BB%E6%95%88%E6%9E%9C/">详情...</a>
    </article>
  
    <article class="article-card">
      <h2 class="article-head">
        <a href="/python/%E5%89%8D%E7%AB%AF/7-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/">python/前端/7-响应式布局</a>
      </h2>
      <p class="article-date">2020年11月3日</p>
      
      <div class="article-summary">
        
          1、什么是响应式设计1-1 定义伊桑·马科特（Ethan Marcotte）在2010年首先提出了响应式网页设计（RWD,Responsive Web Design）这个术语。在他的一篇文章《Responsive Web Design · An A List Apart Article》中他 ...
        
      </div>
      <a class="more" href="/python/%E5%89%8D%E7%AB%AF/7-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%B8%83%E5%B1%80/">详情...</a>
    </article>
  

  
    <div class="guide-pager">
  
    <a href="/page/9/"><span class="page-arrow">← </span>Prev</a>
  
  
    <a href="/page/11/">Next<span class="page-arrow"> →</span></a>
  
</div>
  
</main>


    <div class="scroll-top">
  <span class="arrow-icon"></span>
</div>
    <footer class="app-footer">
<!-- 不蒜子统计 -->
<span id="busuanzi_container_site_pv">
     本站总访问量<span id="busuanzi_value_site_pv"></span>次
</span>
<span class="post-meta-divider">|</span>
<span id="busuanzi_container_site_uv" style='display:none'>
     本站访客数<span id="busuanzi_value_site_uv"></span>人
</span>
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>



  <p class="copyright">
    &copy; 2021 | Proudly powered by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank">小猿取经</a>
    <br>
    Theme by <a href="https://www.cnblogs.com/xiaoyuanqujing" target="_blank" rel="noopener">小猿取经</a>
  </p>
</footer>

<script>
  function async(u, c) {
    var d = document, t = 'script',
      o = d.createElement(t),
      s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.insertBefore(o, s);
  }
</script>
<script>
  async("//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js", function(){
    FastClick.attach(document.body);
  })
</script>

<script>
  var hasLine = 'true';
  async("//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js", function(){
    $('figure pre').each(function(i, block) {
      var figure = $(this).parents('figure');
      if (hasLine === 'false') {
        figure.find('.gutter').hide();
      }
      var lang = figure.attr('class').split(' ')[1] || 'code';
      var codeHtml = $(this).html();
      var codeTag = document.createElement('code');
      codeTag.className = lang;
      codeTag.innerHTML = codeHtml;
      $(this).attr('class', '').empty().html(codeTag);
      figure.attr('data-lang', lang.toUpperCase());
      hljs.highlightBlock(block);
    });
  })
</script>





<!-- Baidu Tongji -->

<script>
    var _baId = 'c5fd96eee1193585be191f318c3fa725';
    // Originial
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?" + _baId;
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
</script>


<script src="/js/script.js"></script>


<script src="/js/search.js"></script>


<script src="/js/load.js"></script>



  <span class="local-search local-search-google local-search-plugin" style="right: 50px;top: 70px;;position:absolute;z-index:2;">
      <input type="search" placeholder="站内搜索" id="local-search-input" class="local-search-input-cls" style="">
      <div id="local-search-result" class="local-search-result-cls"></div>
  </span>


  </body>
</html>